<template>
    <div>
        <el-button type="warning" size="small" id="audit" @click="AuditComment_show=true"><i class="el-icon-finished"></i>审批</el-button>
        <el-button type="success" size="small" id="printBtn" v-print="printObj"><i class="el-icon-printer"></i>打印</el-button>

        <form class="wrapper" id="wrapperApplyPurchaseTable">
            <div class="header">
                <img src="/image/logo.jpg" /><label>固基行远，协晨悟通</label>
            </div>
            <h2 class="Title">固远晨通科技发展有限公司项目实施进度表</h2>
            <table class="report_data" rules=all style="border-bottom:none">
                <tr class="tr_one">
                    <td class="td_Title">项目名称</td>
                    <td class="td_Content">{{dataProject.ProjectName}}</td>
                    <td class="td_Title">项目编号</td>
                    <td class="td_Content">{{dataProject.ProjectNumber}}</td>
                    <td class="td_Title">项目负责人</td>
                    <td class="td_Content">{{ GetNameByUserId(dataProject.HeadUserId) }}</td>
                </tr>
                <tr class="tr_one"> 
                    <td class="td_Title">开始时间</td>
                    <td class="td_Content">{{ fmtDate(dataProject.CreateDate) }}</td>
                    <td class="td_Title">结束时间</td>
                    <td class="td_Content">{{ fmtDate(dataProject.FinishDate) }}</td>
                    <td class="td_Title">经营人员</td>
                    <td class="td_Content">{{ GetNameByUserId(dataProject.ApplyUserid) }}</td>
                </tr>
                <tr class="tr_two">
                    <td class="td_Title">项目类型</td>
                    <td class="td_Content" colspan="5">
                        <el-checkbox-group v-model="ProjectTypeLis" size="medium" disabled>
                            <el-checkbox :label="1" border>施工生产</el-checkbox>
                            <el-checkbox :label="2" border>产品生产</el-checkbox>
                            <el-checkbox :label="4" border>产品研发</el-checkbox>
                            <el-checkbox :label="8" border>技术服务</el-checkbox>
                            <el-checkbox :label="16" border>其它</el-checkbox>
                        </el-checkbox-group>
                    </td>
                </tr>
                <tr class="tr_one"><td class="td_Title" colspan="6">（工序/专业/任务）分解</td></tr>
            </table>
<!--            <el-table class="eltableclass" :data="dataProjectWorkProgress" :span-method="objectSpanMethod" border style="width: 100%; border:1px solid #222222 ">-->
<!--                <el-table-column fixed type="index" label="序号" width="50" align="center" :index="indexMethod"></el-table-column>-->
<!--                <el-table-column label="项目工序" prop="ConstructionProcedure" align="center"></el-table-column>-->
<!--                <el-table-column label="工序内容" prop="ConstructionContents" align="center"></el-table-column>-->
<!--                <el-table-column label="日期" prop="id" align="center">-->
<!--                    <template slot-scope="slot">-->
<!--                        {{ fmtDate(slot.row.StartDate) }}-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column label="今日完成量" prop="Quantity" align="center"></el-table-column>-->
<!--                <el-table-column label="本周完成量" prop="id" align="center"></el-table-column>-->
<!--                <el-table-column label="本月完成量" prop="id" align="center"></el-table-column>-->
<!--                <el-table-column label="累积完成量" prop="id" align="center"></el-table-column>-->
<!--                <el-table-column label="工程总量" prop="TotalQuantity" align="center"></el-table-column>-->
<!--                <el-table-column label="单位" prop="Unit" align="center"></el-table-column>-->
<!--            </el-table>-->

            <table class="report_data" rules=all>
                <tr>
                    <th class="td_Title">序号</th>
                    <th class="td_Title">项目工序</th>
                    <th class="td_Title">工序内容</th>
                    <th class="td_Title">日期</th>
                    <th class="td_Title">今日完成量</th>
                    <th class="td_Title">本周完成量</th>
                    <th class="td_Title">本月完成量</th>
                    <th class="td_Title">累积完成量</th>
                    <th class="td_Title">工程总量</th>
                    <th class="td_Title">单位</th>

                </tr>
                <tr class="tr_one" id="AddHtml">
                    <td class="td_Title">备注</td>
                    <td class="td_Content" colspan="9">{{ dataProjectWorkProgress.Remark }}</td>
                </tr>
                <tr class="tr_one">
                    <td class="td_Title" colspan="2">项目负责人签批</td>
                    <td colspan="8">
                        <p class="audit" id="audit1">{{ GetNameByUserId(dataProjectWorkProgress.AuditUserId1) }}</p>
                        <p class="time" id="time1">{{ fmtDate(dataProjectWorkProgress.AuditTime1) }}</p>
                    </td>
                </tr>
                <tr class="tr_one">
                    <td class="td_Title" colspan="2">计划经营部签批</td>
                    <td colspan="8">
                        <p class="audit" id="audit2">{{ GetNameByUserId(dataProjectWorkProgress.AuditUserId2) }}</p>
                        <p class="time" id="time2">{{ fmtDate(dataProjectWorkProgress.AuditTime2) }}</p>
                    </td>
                </tr>
                <tr class="tr_one">
                    <td class="td_Title" colspan="2">总经理/董事长签批</td>
                    <td colspan="8">
                        <p class="audit" id="audit3">{{ GetNameByUserId(dataProjectWorkProgress.AuditUserId3) }}</p>
                        <p class="time" id="time3">{{ fmtDate(dataProjectWorkProgress.AuditTime3) }}</p>
                    </td>
                </tr>
            </table>
            <div class="author"><span>固远晨通科技发展有限公司制</span></div>
            <div id="Footer">
                <div><span style="margin-right: 100px;">固远晨通科技发展有限公司</span><span>网址：<a>www.guyuanct.com</a></span></div>
                <div><span>地址：成都西区大道199号成都模具工业园C1栋</span></div>
            </div>
        </form>
        <div>
            <h2 class="">数据报表</h2>
            <div class="" id="EchartData">

            </div>
        </div>

        <el-dialog v-if="AuditComment_show" :modal="false"  :visible.sync="AuditComment_show" width="40%" title="审批"  :before-close="onClose">
            <AuditComment ref="AuditCommentRef" :approval-receipt="Approval_event" :approval="Approval"></AuditComment>
        </el-dialog>
    </div>
</template>

<script>
    import AuditComment from "../../AuditComment";
    import * as publicjs from "../../../../public/Scriput/Public";
    import Echatrs from "echarts";
    import $ from 'jquery'

    export default {
        name: "ProjectscheduleTable",
        components:{
            AuditComment
        },
        props:{
            project:{
                type:Object,
                required:true,
            }
        },
        watch:{
            project:function () {
                this.Init()
                this.GetData()
            }
        },
        created() {
            publicjs.setecharts(Echatrs)
        },
        mounted() {
            let _this = this
            this.$nextTick(()=>{
                _this.Init()
                _this.GetData()
            })
        },
        data(){
            return{
                dataProject:{},
                dataProjectWorkProgress:[],
                typelis:[],
                rowlis:[],
                printObj: {
                    id: "wrapperApplyPurchaseTable",  //打印标签的id
                    popTitle: '',  //文件标题
                },
                AuditComment_show:false,
                // 审批弹窗返回数据
                Approval: {
                    State: 1,
                    Comment: '',
                },
                ProjectTypeLis:[],
                GetCompanyAllUsers:[],
            }
        },
        methods:{
            //表格数据序列号
            indexMethod(index) {
                return index + 1
            },
            //外用数据获取
            Init(){
                this.GetCompanyAllUsers = publicjs.GetCompanyAllUsers(this.$http)
            },
            //数据转换
            fmtDate(val){
                if (val!=null&&val!=''){
                    return val.split(' ')[0]
                }else{
                    return ''
                }
            },
            // 构造详细的申购单内物资信息
            GetData(){
                this.$http.post('Project1/GetProjectWorkProgressReport',{ ProjectId: this.project.Id }).then(res=>{
                    this.dataProject = res.data.dataProject
                    this.dataProjectWorkProgress = res.data.dataProjectWorkProgress
                    this.typelis = res.data.typelis
                    this.ProjectTypeLis = this.dataProject.ProjectType.toString().split(',').map(x=> parseInt(x))
                    // this.rowlis = this.FenZu()
                    // this.InitEchart(res.data)
                    this.InitProjectHtml(this.dataProjectWorkProgress)
                })
            },
            //根据userid获取userName,主要用于公司人员
            GetNameByUserId(UserId){
                for (let i=0;i<this.GetCompanyAllUsers.length;i++){
                    if (this.GetCompanyAllUsers[i].Id == parseInt(UserId)){
                        return this.GetCompanyAllUsers[i].UserName
                    }
                }
            },
            // 关闭审批结果组件
            async onClose(done) {
                await done();
                this.$refs["AuditCommentRef"].FormClose_event();
            },
            //审批
            Approval_event(){
                this.$http.post('Project1/AuditProjectWorkProgressReport',{
                    ProjectId:this.project.Id,
                }).then(res=>{
                    if (res.data.IsSuccess){
                        this.$message.success(res.data.Msg)
                        this.AuditComment_show=false
                        this.GetData()
                    }else{
                        this.$message.warning(res.data.Msg)
                    }
                })
                this.$refs["AuditCommentRef"].FormClose_event();
            },
            //数据表格行列合并
            objectSpanMethod({ row, column, rowIndex, columnIndex }){
                let rowspanObj = null
                let data = this.rowlis
                let rowobj = data.find(v=>{ return v.start == rowIndex })
                if(rowobj != undefined){
                    if(columnIndex==1 || columnIndex==2 || columnIndex==9 || columnIndex==8){
                        return {rowspan: rowobj.row, colspan: 1}
                    }
                }else{
                    if (columnIndex==1 || columnIndex==2){
                        return {rowspan: 0, colspan: 0}
                    }
                }
            },
            //分组
            FenZu(){
                let rowlis=[]
                let startCount = 0
                this.typelis.forEach(v=>{
                    let rowCount = 0
                    this.dataProjectWorkProgress.forEach(item=>{
                        if (item.WorkPlanId == v){
                            rowCount++
                        }
                    })
                    if (startCount==0){
                        rowlis.push({ start:0, row:rowCount })
                    }else {
                        rowlis.push({ start: startCount , row:rowCount })
                    }
                    startCount = startCount + rowCount
                })
                return rowlis
            },
            //初始化echarts统计报表及走势图
            InitEchart(data){
                let _this = this
                var newData = data.dataProjectWorkProgress;
                newData.sort(function (a, b) {//按照时间升序排序
                    if (_this.fmtDate(a.StartDate) > _this.fmtDate(b.StartDate)) return 1;
                    if (_this.fmtDate(a.StartDate) < _this.fmtDate(b.StartDate)) return -1;
                    return 0;
                });
                //按照日期统计
                var noRepeatWorkPlanData = publicjs.DataGroupBy(JSON.stringify(newData), 'WorkPlanId');
                noRepeatWorkPlanData.forEach((d,i)=>{
                    var data = newData.filter(x => x.WorkPlanId == d.WorkPlanId);
                    var dataList = data.map(x => { return _this.fmtDate(x.StartDate) });
                    var valueList = [], gapList = [],totalList=[];
                    gapList.push(0);
                    var oldAmount = 0,sum=0;
                    data.forEach((dd,ii)=>{
                        if (dd == null || dd == undefined) {
                            dd.Quantity = 0;
                        }
                        valueList.push(dd.Quantity);
                        sum = publicjs.dcmAdd(sum, dd.Quantity);
                        totalList.push(sum);
                        if (ii != 0) {
                            oldAmount = publicjs.dcmAdd(gapList[ii - 1], valueList[ii - 1]);
                            gapList.push(oldAmount);
                        }
                        if (ii == (data.length - 1)) {
                            totalList.push(sum);
                        }
                    })
                    dataList.push(_this.fmtDate(d.PlanEndDate) + "(计划总量)");
                    valueList.push(d.TotalQuantity);
                    gapList.push(0);
                    var div = document.createElement('div')
                    div.style.height='500px'
                    div.id='Data'+i
                    document.getElementById('EchartData').appendChild(div)
                    publicjs.InitEchartBar_TotalTwo("Data" + i + "", d.ConstructionProcedure + "--每日累积完成量（" + d.Unit + "）", dataList, valueList, gapList, totalList);
                })
            },
            //初始化动态生成的html内容
            InitProjectHtml(data){
                let _this = this
                var j = 0;//用于序号计数
                if (data.length == 0 || data.length == undefined)
                    var a = 1;
                else {
                    var baseData = publicjs.DataGroupBy(JSON.stringify(data), 'WorkPlanId');
                    var weekQuantity = 0, weekTotal = 1, MonthQuantity = 0, MonthTotal = 1, oldDate = "1970-01-01";
                    $.each(baseData, function (ii, dd) {
                        var newData = data.filter(x => x.WorkPlanId == dd.WorkPlanId);
                        var allQuantity = 0;
                        $.each(newData, function (i, d) {
                            var tr;
                            allQuantity = publicjs.dcmAdd(allQuantity, d.Quantity);
                            var startDate = _this.fmtDate(d.StartDate);
                            var endDate = _this.fmtDate(d.EndDate);
                            if (d.Unit == null)
                                d.Unit = "";
                            if (i == 0) {
                                tr = $("<tr class='tr_one first'></tr>");
                                var length = newData.length;
                                tr.append("<td class='td_Content'>" + (j + 1) + "</td>");
                                tr.append("<td rowspan='" + length + "' class='td_Content'>" + d.ConstructionProcedure + "</td>");
                                tr.append("<td rowspan='" + length + "' class='td_Content'>" + d.ConstructionContents + "</td>");
                                tr.append("<td class='td_Content'>" + startDate + "</td>");
                                tr.append("<td class='td_Content Quantity'>" + d.Quantity + "</td>");
                                tr.append("<td rowspan='" + length + "' class='td_Content allQuantity'></td>");
                                tr.append("<td rowspan='" + length + "' class='td_Content'>" + d.TotalQuantity + "</td>");
                                tr.append("<td rowspan='" + length + "' class='td_Content'>" + d.Unit + "</td>");
                            }
                            else {
                                tr = $("<tr class='tr_one'></tr>");
                                tr.append("<td class='td_Content'>" + (j + 1) + "</td>");
                                tr.append("<td class='td_Content'>" + startDate + "</td>");
                                tr.append("<td class='td_Content Quantity'>" + d.Quantity + "</td>");
                            }
                            if (publicjs.isSameMonth(oldDate, startDate) && i != 0) {
                                MonthQuantity = publicjs.dcmAdd(MonthQuantity, d.Quantity);
                                MonthTotal++;
                            } else {
                                tr.find(".Quantity").after("<td class='td_Content monthQuantity'></td>");
                                tr.addClass("month");
                                $("#AddHtml").prevAll(".month").eq(0).find(".monthQuantity").text(MonthQuantity);
                                $("#AddHtml").prevAll(".month").eq(0).find(".monthQuantity").attr('rowSpan', MonthTotal);
                                MonthQuantity = d.Quantity;
                                MonthTotal = 1;
                            }
                            if (publicjs.isSameWeek(oldDate, startDate) && i != 0) {
                                weekQuantity = publicjs.dcmAdd(weekQuantity, d.Quantity);
                                weekTotal++;
                            } else {
                                tr.find(".Quantity").after("<td class='td_Content weekQuantity'></td>");
                                tr.addClass("week");
                                $("#AddHtml").prevAll(".week").eq(0).find(".weekQuantity").text(weekQuantity);
                                $("#AddHtml").prevAll(".week").eq(0).find(".weekQuantity").attr('rowSpan', weekTotal);
                                weekQuantity = d.Quantity;
                                weekTotal = 1;
                            }
                            oldDate = startDate;
                            $("#AddHtml").before(tr);
                            j++;
                        })
                        //向前查找最新添加的元素赋值
                        $("#AddHtml").prevAll(".first").eq(0).find(".allQuantity").text(allQuantity);
                    });
                    //最后一行的周统计和月统计不会再循环中执行
                    $("#AddHtml").prevAll(".month").eq(0).find(".monthQuantity").text(MonthQuantity);
                    $("#AddHtml").prevAll(".month").eq(0).find(".monthQuantity").attr('rowSpan', MonthTotal);
                    $("#AddHtml").prevAll(".week").eq(0).find(".weekQuantity").text(weekQuantity);
                    $("#AddHtml").prevAll(".week").eq(0).find(".weekQuantity").attr('rowSpan', weekTotal);
                }
            }
        },
    }
</script>

<style scoped>
    #audit {
        position: absolute;
        right: 11%;
        top: 80px;
        z-index: 9999;
    }
    #printBtn {
        position: absolute;
        right: 11%;
        top: 115px;
        z-index: 9999;
    }
    /*外包装样式*/
    .wrapper {
        width: 80%;
        height: 100%;
        margin: auto;
    }
    /*页眉样式*/
    .header {
        font-weight: bold;
        font-size: 20px;
        font-family: cursive;
        width: 80%;
        margin: auto;
        border-bottom: 2px solid black;
        padding: 10px 0px;
        position: relative;
    }

    .header img {
        width: 200px;
        height: 55px;
    }

    .header label {
        position: absolute;
        bottom: 10px;
        right: 70px;
    }
    /*标题样式*/
    h2 {
        width: 80%;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }
    /*标题样式*/
    h4 {
        width: 80%;
        text-align: center;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }
    /*数据表格样式*/
    .report_data {
        width: 100%;
        text-align: center;
        border: 1px solid black;
        font-size: 14px;
        word-break: break-all;
    }

    .report_data tr {
        height: 40px;
    }

    .report_data th {
        font-weight: 100;
    }
    .baseInfo .worderWrapper {
        display: inline-block;
        width: 200px;
    }
    .report_audit .tdCenter {
        text-align: center;
    }

    .report_audit tr {
        height: 70px;
    }

    .report_audit tr p {
        padding: 3px;
    }

    .report_audit td {
        padding: 0 10px;
    }

    .report_audit td:first-child {
        width: 150px;
    }

    .report_audit .tr_center {
        text-align: center;
    }

    tr p.audit {
        font: italic bold 20px/30px arial,sans-serif;
        text-align: right;
        /*padding-right: 110px;*/
    }

    tr p.audit span {
        display: inline-block;
        width: 100px;
        font: bold 17px/30px arial,sans-serif;
    }

    tr p.gray {
        color: gray;
    }

    tr p.audit span.red {
        color: red;
    }

    tr p.audit span.blue {
        color: blue;
    }
    .author {
        width: 80%;
        margin: auto;
        margin-top: 5px;
        font-weight: bold;
        text-align: right;
    }
    /*页脚样式*/
    #Footer {
        width: 80%;
        margin: auto;
        border-top: 2px solid black;
        margin-top: 60px;
        font-weight: bold;
    }
    #Footer div {
        padding-top: 5px;
        padding-bottom: 10px;
    }
    #search select {
        text-align: left;
    }
    /*折叠面板样式修改*/
    .layui-collapse .layui-colla-title {
        margin: 0;
        width: 100%;
        text-align: left;
    }
    /*报表管理下统计报表的样式*/
    #EchartData .pie {
        height: 500px;
    }

    #EchartData .pieData {
        float: left;
        width: 50%;
        height: 500px;
    }

    #EchartData .bar {
        width: 100%;
        height: 500px;
    }

    .report_data .tr_one {
        height: 50px;
    }

    .report_data .tr_two {
        height: 100px;
    }

    .report_data .td_Title {
        font-weight: bold;
        width: 200px;
    }

    .td_left {
        text-align: left;
        padding-left: 20px;
    }

    .td_Content {
        padding: 5Px 5px;
    }

    .report_data .layui-disabled, .report_data .layui-disabled:hover {
        color: black !important;
    }

    .report_data .layui-form-radio > i:hover, .report_data .layui-form-radioed > i {
        color: #5FB878 !important;
    }
</style>
